<!DOCTYPE html>
<html lang="en">

	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="format-detection" content="telephone=no, email=no" />
		<meta charset="UTF-8">
		<title>优购优品网</title>
		<!-- <link rel="stylesheet" href="../css/themes/css/core.css">
    <link rel="stylesheet" href="../css/themes/css/icon.css">
    <link rel="stylesheet" href="../css/themes/css/home.css"> -->
		<link rel="stylesheet" type="text/css" href="../css/vant.css">
		<link rel="stylesheet" type="text/css" href="../css/base.css" />
		<link rel="stylesheet" type="text/css" href="../css/local.css" />
		<script type="text/javascript" src="../script/jquery.js"></script>
		<script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
		<script type="text/javascript" src="../script/vue.min.js"></script>
		<script src="../script/vant.min.js"></script>
		<script type="text/javascript" src="../script/fastclick.js"></script>
		<script type="text/javascript" src="../script/base.js"></script>

		<style>
			/* .content {
            background: #efefef;
            height: 100%;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            position: relative;
        } */

			.row {
				position: relative;
				margin-bottom: 10px;
			}

			.row .img {
				width: 100px;
				height: 80px;
				border-radius: 4px;
				overflow: hidden;
				/* padding: 0 10px; */
			}

			.row .img img {
				width: 100%;
				height: 100%;
			}

			.row .desc {
				padding-right: 5px;
				padding-left: 10px;
			}

			.row .desc .title {
				font-size: 14px;
				line-height: 20px;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}

			.row .desc .title .hot {
				color: #fff;
				background: #cd1b21;
				font-size: 12px;
				border-radius: 2px;
				margin-right: 5px;
				vertical-align: middle;
			}

			.row .desc .sub-title {
				font-size: 12px;
				color: #969799;
				line-height: 20px;
				height: 40px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.row .desc .sub-title * {
				vertical-align: middle;
			}

			.sku {
				padding: 3px 0;
				font-size: 13px;
				color: #9e9e9e;
			}

			.price {
				text-align: right;
				font-size: 14px;
				line-height: initial;
			}

			.van-search {
				background: transparent !important;
				padding: 0;
			}

			.van-nav-bar__title {
				margin: 0 10px 0 50px;
				max-width: none;
			}

			.van-nav-bar__left {
				height: 46px;
			}

			.van-dropdown-menu {
				height: 40px;
			}



			.pd {
				padding: 5px 10px 5px 10px;
			}

			.pd>div {
				overflow: hidden;
				border-radius: 8px;
			}

			.f-r {
				text-align: right;
				color: #9e9e9e;
				font-size: 13px;
			}

			.button {
				text-align: right;
				padding: 5px 0;
			}

			.button button {
				margin-left: 10px;
			}

			.code {
				font-weight: 700;
				font-size: 15px;
				padding-bottom: 8px;
			}

			.close {
				float: right;
				color: #ff976a;
				font-size: 13px;
				font-weight: 500;
			}

			.van-button--small {
				height: 26px;
			}

			.tab {
				overflow: hidden;
				position: relative;
			}

			.tab>div {
				width: 33.33%;
				float: left;
				height: 40px;
				line-height: 40px;
				text-align: center;
				font-size: 13px;
			}

			.tab .on {
				border-bottom: 3px solid #cd1b21;
				color: #cd1b21;
			}

			.com {
				padding: 5px 0 5px 0;
				text-align: center;
				font-size: 13px;
				color: #cd1b21;
				margin: 0 15px;
				border-top: 1px solid rgba(235, 237, 240, 0.6);
			}

			.com>* {
				vertical-align: middle;
			}
		</style>


	</head>

	<body>
		<div id="app" v-cloak>
			<div class="init-full">
				<van-nav-bar class="head head-index" left-arrow @click-left="onClickLeft">
					<div slot="title" style="margin-top: 10px;">
						<form action="" style="margin-top:-3px;">
							<van-search placeholder="搜索我的订单" v-model="filter.searchKey" shape="round" @search="getList">
							</van-search>
						</form>
					</div>
				</van-nav-bar>
				<div class="body-no-bottom">
					<div class="content">
						<div class="tab">
							<div @click="toggleStatus(6)" :class="filter.orderStatus == 6?'on':''">退款中</div>
							<div @click="toggleStatus(18)" :class="filter.orderStatus == 18?'on':''">退款失败</div>
							<div @click="toggleStatus(9)" :class="filter.orderStatus == 9?'on':''">已退款</div>
						</div>
						<div style="height:calc(100% - 40px);overflow: auto;">
							<van-list v-model="listLoading" :finished="listFinished" finished-text="没有更多了"
								@load="listOnLoad">

								<div class="pd" v-for="row in orderList" @click="intoDetail(row)"
									v-if="row.node && row.node.length">
									<van-cell>
										<div class="code">单号：{{row.OrderId}}
											<span class="close"
												v-else-if="row.OrderStatus == 4 && row.CloseReason != '订单已退款完成'">交易关闭</span>
											<span class="close"
												v-else-if="row.OrderStatus == 4 && row.CloseReason == '订单已退款完成'">退款成功</span>
											<span class="close" v-else-if="row.OrderStatus == 6">退款申请中</span>
											<span class="close" v-else-if="row.OrderStatus == 18">退款失败</span>
										</div>
										<div class="row flex-box" v-for="(item,itemIndex) in row.node"
											v-show="!row.isCom?itemIndex < 6 :true">
											<div class="img">
												<img
													:src="item.ThumbnailsUrl?(shoppingMallServerIP + item.ThumbnailsUrl):'../image/no.png'" />
											</div>
											<div class="flex-main desc">
												<div class="title">{{item.ProductName}}</div>
												<div class="sku">{{item.SKU}}</div>
											</div>
											<div class="price">
												<div>￥&nbsp;<span style="font-size: 15px;">{{item.ItemListPrice}}</span>
												</div>
												<div style="color:#9e9e9e">x{{item.ShipmentQuantity}}</div>
											</div>
										</div>
										<div class="com" v-show="!row.isCom && row.node.length >= 5"
											@click.stop="showComplete(row)">
											<span>显示所有商品&nbsp;</span>
											<van-icon name="arrow-down"></van-icon>
										</div>
										<div class="f-r">共{{row.node.length}}件商品&nbsp;&nbsp;合计：￥&nbsp;
											<span style="font-size: 16px;">{{row.OrderTotal}}</span>&nbsp;
											<span v-if="row.Freight">（含运费￥&nbsp;{{row.Freight}}）</span>
										</div>
										<div class="button">
											<van-button type="default" round size="small" v-if="row.OrderStatus == 18"
												@click.stop="refundOrder(row)">发起退款</van-button>
										</div>
									</van-cell>
								</div>

								<div v-show="!orderList.length"
									style="font-size: 14px;color:#9e9e9e;text-align:center;padding: 20px 0;">暂无订单</div>
							</van-list>
						</div>

					</div>
					<van-loading v-if="showLoading" />
				</div>
			</div>

			<van-popup v-model="showRefund" position="bottom" :style="{ height: '30%' }">
				<van-field v-model="refundData.refundReason" rows="1" autosize label="退款原因" type="textarea"
					placeholder="请输入退款原因"></van-field>
				<van-field v-model="refundData.remark" rows="1" autosize label="备注" type="textarea" placeholder="请输入备注">
				</van-field>
				<div class="btn-padding">
					<van-button type="primary" block :loading="ifConfirm" loading-text="发起退款中..."
						@click="refundConfirm">退款
					</van-button>
				</div>
			</van-popup>
		</div>
	</body>

	<!-- 调用 uniapp webview 的 api ，记得需要写在 body 标签下面 -->
	<script src="../../../assets/script/uni.webview.1.5.4.js"></script>
	<script type="text/javascript">
		var vm;
		//$('.init-full').show();
		var OrderNo = '';

		var userInfo = FLD.getUserInfo();

		// var aliPayPlus = api.require('aliPayPlus');
		// var wxPay = api.require('wxPay');

		// api.addEventListener({
		// 	name: 'refreshOrderList'
		// }, function(ret, err) {
		// 	vm.getList();
		// });

		vm = new Vue({
			el: '#app',
			data: {
				showLoading: false,
				ifConfirm: false,
				showRefund: false,
				serverIP: 'http://' + FLD.serverIP,
				shoppingMallServerIP: 'http://' + FLD.shoppingMallServerIP,
				listLoading: false,
				listFinished: true,
				filter: {
					orderStatus: 6,
					pageIndex: 1,
					pageSize: 20,
					searchKey: ''
				},
				refundData: {
					remark: '',
					refundReason: ''
				},
				orderList: []
			},
			created: function() {
				var that = this;

				var appTop = parseInt(window.localStorage.getItem('safeAreaTop'));

				if (appTop) {
					$('.head-index').css({
						'padding-top': appTop + 'px',
						'height': appTop + 50 + 'px',
						'line-height': '40px'
					})
				}
				that.getList();
			},
			methods: {
				showComplete(row) {
					var that = this;
					if (typeof row.checked === 'undefined') {
						that.$set(row, 'isCom', true);
					} else {
						row.isCom = true;

					}
				},
				toggleStatus(index) {
					var that = this;
					that.filter.orderStatus = index;
					that.getList();
				},
				getList() {
					var that = this;
					that.showLoading = true;
					that.filter.pageIndex = 1;
					FLD.ajax('sp_getOrderList', that.filter, function(res) {
						that.showLoading = false;
						that.listFinished = false;
						that.orderList = res.ds;
						var ids = [];
						for (var i in res.ds) {
							ids.push('\'' + res.ds[i].OrderId + '\'');
						}
						that.getProducts(ids, that.filter.pageIndex);
					})
				},
				listOnLoad(row) {
					var that = this;
					that.filter.pageIndex++;
					FLD.ajax('sp_getOrderList', that.filter, function(res) {
						that.listLoading = false;
						if (res.ds.length == 0) {
							that.listFinished = true;
						}
						that.orderList = that.orderList.concat(res.ds);
						var ids = [];
						for (var i in res.ds) {
							ids.push('\'' + res.ds[i].OrderId + '\'');
						}
						that.getProducts(ids, that.filter.pageIndex);
					})
				},
				getProducts(ids, pageIndex) {
					var that = this;
					if (!ids.length) return;
					FLD.ajax('sp_GetOrderItemByOrderIds', {
						orderIds: ids.join()
					}, function(res) {
						var n = (pageIndex - 1) * that.filter.pageSize;
						for (var i = n; i < n + that.filter.pageSize; i++) {
							if (that.orderList[i]) {
								that.$set(that.orderList[i], 'node', [])
								for (var j in res.ds) {
									if (that.orderList[i].OrderId == res.ds[j].OrderId) {
										that.orderList[i].node.push(res.ds[j])
									}
								}
							}


						}
					})
				},
				refundOrder(row) {
					var that = this;
					OrderNo = row.OrderId;

					that.showRefund = true;
				},
				refundConfirm() {
					var that = this;
					that.showRefund = false;
					that.ifConfirm = true;
					var obj = {
						orderId: OrderNo,
						remark: that.refundData.remark,
						refundReason: that.refundData.refundReason
					}
					FLD.ajax('sp_orderRefund', obj, function(res) {
						that.ifConfirm = false;
						OrderNo = '';
						if (res.ds[0].status == 200) {
							that.getList();
							// api.sendEvent({
							// 	name: 'refreshAboutUser'
							// });
							layer.open({
								content: '退款发起成功!请耐心等待商家处理',
								skin: 'msg',
								time: 2
							});
						} else {
							layer.open({
								content: res.ds[0].msg,
								skin: 'msg',
								time: 2
							});
						}
					})
				},
				intoDetail(row) {
					var that = this;
					window.location.href = 'orderDetail.html'
					window.localStorage.setItem('OrderId', row.OrderId)
					// api.openWin({
					// 	name: 'orderDetail',
					// 	url: 'orderDetail.html',
					// 	reload: true,
					// 	slidBackEnabled: false,
					// 	pageParam: {
					// 		OrderId: row.OrderId
					// 	}
					// })
				},


				onClickLeft() {
					uni.navigateBack()
				}
			}
		})
	</script>

</html>